<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 买书

        // 没有设计模式 
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // 去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        // ..

        // 有了发布订阅模式  
        //  去到书店问有没有 <JavaScript从入门到放弃>这本书,没有
        //  找到售货员小姐姐 加上微信 跟小姐姐说  书到了跟我说 
        //  在家等着  

        //  好多人都要买书 
        // 售货员添加了n多人的微信  
        // 对方想要的书来了  小姐姐发微信通知 

        // 张三 买  <html>
        // 张三 买  <css>
        // 李四 买 <js>
        // 李四 买 <vue>
        // 李四 买 <css>
        // 王五 买 <js>
        // 王五 买 <html>
        // 赵六 买 <vue>
        // 赵六 买 <react>

        // 上面这种记录方式不好管理 

        // js: [李四,王五]
        // html: [张三,王五]
        // css: [张三,李四]
        // vue: [赵六,李四]
        // react:[赵六]


        // 通知李四  function lige(val){console.log('售货员小姐姐说:'+val)}
        // 通知王五  function wangge(val){console.log('售货员小姐姐说:'+val)}
        // 通知张三  function sange(val){console.log('售货员小姐姐说:'+val)}
        // 通知赵六  function laoliu(val){console.log('售货员小姐姐说:'+val)}


        // js: [lige,wangge]
        // html: [sange,wangge]
        // css: [wangge,lige]
        // vue: [laoliu,lige]
        // react:[laoliu]

        // 上面就是售货员 小姐姐的通讯录 

        // 通讯录 可以添加  可以删除

        // 需要管理通讯录 

        // 存放 对象数据类型

        // const tongxunlu = {
        //     js: [lige,wangge],
        //     html: [sange,wangge],
        //     css: [wangge,lige,鑫蕊],
        //     vue: [laoliu,lige],
        //     react:[laoliu],
        // }


        // 添加  

        // 删除 

        // 取出里边的方法 

      
        class Observer {
            constructor(name) {
                this.name = name
                this.messages = {
                    js: [lige, wangge],
                    html: [sange, wangge]
                }

            }


            add(type,fn){
                if(!this.messages[type]){
                    this.messages[type] = []
                }

                // 走到这里  this.messages[type] 必然是个数组 
                this.messages[type].indexOf(fn) === -1 && this.messages[type].push(fn);
            }

            remove(type,fn){
                // 不存在这个type 什么也不操作
                if(!this.messages[type]){
                    return
                }
                // fn函数不存在
                // 直接删除 type 这个键值对 
                if(!fn){
                    return
                }

                // fn函数存在 
                this.messages[type] = this.messages[type].filter(item=>item !== fn);


            }


            trigger(type){
                 // 如果没有type 
                 if(!this.messages[type]){
                    return;
                 } 
                 // 有这个type
                 this.messages[type].forEach(item => {
                    // item是数组的每个元素 元素是函数
                    // 组装数据传递给每个订阅者 
                    const data = {
                        type,
                        target:this.name

                    }
                    item(data); // 让数组中的每个函数执行
                 });
            }
        }


        // Observer的对象就是每个售货员小姐姐
        
        const beauty1 = new Observer('古力娜扎');
// beauty1 就是发布者 
        function lige(val){console.log(val.target+'售货员小姐姐说:'+'李哥你的'+val.type+'书到了')}
        function wangge(val){console.log(val.target+'售货员小姐姐说:'+'老王你的'+val.type+'书到了')}
        function sange(val){console.log(val.target+'售货员小姐姐说:'+'三哥你的'+val.type+'书到了')}
        function laoliu(val){console.log(val.target+'售货员小姐姐说:'+'老六你的'+val.type+'书到了')}
// lige wangge sange laoliu 他们是订阅者 
        beauty1.trigger('html');
        beauty1.trigger('js');

        function longfei(val){console.log(val.target+'售货员小姐姐说:'+'龙飞你的'+val.type+'书到了')}
        beauty1.add('金瓶梅',longfei);

        console.log(beauty1.messages);
        beauty1.trigger('金瓶梅');

        beauty1.remove('html',wangge)  ;
        beauty1.trigger('html');
    </script>
</body>

</html>